<template>
    <div class="parent">
        <ul class="list">
            <li class="listItem">
                <label class="labels" for="">发票抬头:</label>
                <input type="text" placeholder="请输入发票抬头" v-model.trim="TT">
            </li>
            <li class="listItem">
                <label class="labels" for="">发票金额:</label>
                <span class="textMoney">{{amount}}</span>
            </li>
            <li class="listItem">
                <label class="labels" for="">收件人:</label>
                <input type="text" placeholder="请填写收件人" v-model.trim="SJR">
            </li>
            <li class="listItem">
                <label class="labels" for="">联系电话:</label>
                <input type="number" placeholder="请填写联系电话" v-model.trim="LXDH">
            </li>
            <li class="listItem">
                <label class="labels" for="">收件地址:</label>
                <input type="text" placeholder="请填写收件地址" v-model.trim="SJDZ">
            </li>
        </ul>
        <footer class="footer">
            <ul class="footer_list">
                <li class="footer_listItem" @click="trueBtn">
                    <span class="square" style="background: #F99817;" ref="square" v-show="flagShow">√</span>
                    <span class="square" ref="square" v-show="flagHide">√</span>
                    <span class="textTrue">确认</span>
                </li>
                <li class="footer_listItem sp" @click="next">下一步</li>
            </ul>
        </footer>
    </div>
</template>
<script>
export default {
    name: 'Page_perList',
    data () {
        return {
            TT: '',
            SJR: '',
            LXDH: '',
            SJDZ: '',
            amount: '',
            type: '纸质发票',
            ttType: '个人/非企业性单位',
            flagShow: false,
            flagHide: true,
            key_flag: true
        }
    },
    created () {
        this.amount = sessionStorage.getItem('money')
    },
    methods: {
        trueBtn () {
            if (this.TT != '' && this.FPJE != '' && this.SJR != '' && this.LXDH != '' && this.SJDZ != '') {
                if (this.key_flag) {
                    this.flagShow = true;
                    this.flagHide = false;
                    this.key_flag = false;
                } else {
                    this.flagShow = false;
                    this.flagHide = true;
                    this.key_flag = true;
                }
            } else {
                alert('请您输入纸质（个人）发票信息')
            }
        },
        next () {
            if (!this.key_flag) {
                this.$router.push({
                    name: 'Invoicedetail',
                    params: {
                        TT: this.TT,
                        SJR: this.SJR,
                        ZCDH: this.LXDH,
                        DZDH: this.SJDZ,
                        FPJE: this.amount,
                        FPLX: this.type,
                        TTLX: this.ttType
                    }
                })
            } else {
                console.log('请确认填写的信息')
            }
        }
    }
}
</script>
<style scoped lang="less">
.parent{
    width: 100%;
    height: 100%;
    background: #fff;
}
.list{
    width: 100%;
    .listItem{
        width: 100%;
        height: 1.333333rem;
        padding: 0 .48rem;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        .labels{
            display: block;
            width: 2.666667rem;
            height: 100%;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            font-size:12px;
            font-family:ArialMT;
            color:rgba(82,82,82,1);
            line-height:14px;
            letter-spacing:1px;
        }
        .sp{
            color: #ccc;
        }
        input{
            width: 6.4rem;
            height: 100%;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            outline: none;
            border: none;
            background: #fff;
        }
        input::-webkit-input-placeholder{
            font-size:12px;
            font-family:ArialMT;
            color:rgba(204,204,204,1);
            line-height:14px;
            letter-spacing:1px;
        }
       .textMoney{
           color: rgba(255,199,38,1);
            font-size:12px;
            font-family:ArialMT;
            line-height:14px;
            letter-spacing:1px;
       }
    }
    .listItem:after{
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        background: #cccccc;
        width: 100%;
        height: 1px;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }
}
.sp{
    color: #ccc;
}
.footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 1.28rem;
    background: #fff;
    border-top: 1px solid rgba(240, 240, 240, 1);
    .footer_list{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        .footer_listItem{
            width: 59%;
            height: 100%;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            padding-left: .56rem;
            .square{
                display: block;
                width: .533333rem;
                height: .533333rem;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                font-size: 0.14rem;
                color: #fff;
                border-radius: .08rem;
                border:1px solid #F99817;
                margin-right: .133333rem;
            }
            .textTrue{
                font-size:12px;
                font-family:PingFangSC-Regular;
                font-weight:400;
                color:rgba(249,152,23,1);
                line-height:17px;
                letter-spacing:1px;
            }
        }
        .sp{
            width: 3.84rem;
            font-size:16px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(255,255,255,1);
            line-height:22px;
            letter-spacing:1px;
            background:linear-gradient(118deg,rgba(255,199,38,1) 0%,rgba(249,151,22,1) 100%);
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>
